<template>
    <view class="app-container address">
        <zzk-nav title="注册成为商户"></zzk-nav>
        <view class="address-form">
            <view class="address-line flexrow">
                <view>
                    <text class="label">商户名称</text>
                </view>
                <view class="value">
                    <up-input v-model="params.name" placeholder="请输入商户名称" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">商户简称</text>
                </view>
                <view class="value">
                    <up-input v-model="params.alias" placeholder="请输入商户简称" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">商户税号</text>
                </view>
                <view class="value">
                    <up-input v-model="params.taxNo" placeholder="请输入商户税号" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">店主手机号</text>
                </view>
                <view class="value">
                    <up-input v-model="params.mobile" type="number" placeholder="请输入店主手机号" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">营业执照</text>
                </view>
                <view class="value">
                    <image class="img" :src="certOss" mode="aspectFill" v-if="params.certOss" @tap="chooseImg"></image>
                    <view class="address-upload flexcolumn" @tap="chooseImg" v-else>
                        <uni-icons type="plusempty" size="20" color="#999"></uni-icons>
                        <text class="tip">上传图片</text>
                    </view>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">所在地</text>
                </view>
                <view class="value flexrow" @tap="openAddress">
                    <text class="txt" v-if="mapaddress">{{ mapaddress }}</text>
                    <text class="txt gray" v-else>请选择营业执照所在地</text>
                    <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">省市区</text>
                </view>
                <picker mode="region" @change="bindPickerChange" style="flex: 1;">
                    <view class="value flexrow">
                        <text class="txt" v-if="params.province">{{ params.province }}/{{ params.city }}/{{ params.districts }}</text>
                        <text class="txt gray" v-else>请选择所在区域</text>
                        <uni-icons type="right" size="16" color="#999"></uni-icons>
                    </view>
                </picker>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">详细地址</text>
                </view>
                <view class="value">
                    <up-input v-model="params.detailAddress" placeholder="请输入详细地址" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">平台抽成</text>
                </view>
                <view class="value">
                    <text class="txt">{{ commission }}%</text>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label long">物流收货地址</text>
                </view>
                <view class="value">
                    <up-input v-model="params.logisticsAddress" placeholder="请输入物流收货地址" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label long">物流收货电话</text>
                </view>
                <view class="value">
                    <up-input v-model="params.logisticsContact" type="number" placeholder="请输入物流收货电话" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label long">是否开通售卖业务</text>
                </view>
                <view class="value flexcolumn f">
                    <up-switch v-model="marketable" inactiveColor="#ccc"></up-switch>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label long">是否开通租赁业务</text>
                </view>
                <view class="value flexcolumn f">
                    <up-switch v-model="rentable" inactiveColor="#ccc"></up-switch>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label long">是否开通换货业务</text>
                </view>
                <view class="value flexcolumn f">
                    <up-switch v-model="exchangable" inactiveColor="#ccc"></up-switch>
                </view>
            </view>
        </view>
        <zzk-bottom>
            <view class="address-bottom flexrow">
                <up-button type="primary" text="保存" :disabled="!rentable && !marketable" :loading="loading" @click="onSubmit"></up-button>
            </view>
        </zzk-bottom>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { uploadFile } from '@/api/upload.js'
import { merchantRegister, merchantConfig } from '@/api/merchant.js'
import { showToast, backpage } from '@/utils/util'
import WxValidate from '@/utils/WxValidate.js'

const exchangable = ref(false)
const mapaddress = ref('')
const marketable = ref(false)
const rentable = ref(false)
const certOss = ref('')
const params = ref({
    name: '',
    alias: '',
    taxNo: '',
    mobile: '',
    certOss: '',
    province: '',
    city: '',
    districts: '',
    detailAddress: '',
    exchangable: 0,
    longitude: '',
    latitude: '',
    logisticsAddress: '',
    logisticsContact: '',
    marketable: 0,
    rentable: 0
})
const loading = ref(false)
const commission = ref('')

onLoad(() => {
    getCommission()
})

const getCommission = () => {
    merchantConfig({ key: 'commission' }).then(res => {
        try {
            commission.value = res[0].configValue
        } catch (e) {
            
        }
    })
}

const openAddress = () => {
    uni.chooseLocation({
        success: res => {
            mapaddress.value = res.address
            params.value.longitude = res.longitude
            params.value.latitude = res.latitude
        }
    })
}

const chooseImg = () => {
    uni.chooseImage({
        count: 1,
        success: res => {
            const tempFiles = res.tempFiles[0]
            certOss.value = tempFiles.path
            uploadFile(tempFiles.path).then(key => {
                params.value.certOss = key
            })
        }
    })
}

const bindPickerChange = (e) => {
    const arr = e.detail.value
    params.value.province = arr[0]
    params.value.city = arr[1]
    params.value.districts = arr[2]
}

const onSubmit = () => {
    params.value.exchangable = exchangable.value ? 1 : 0
    params.value.marketable = marketable.value ? 1 : 0
    params.value.rentable = rentable.value ? 1 : 0
    
    const rules = {
        name: { required: true },
        alias: { required: true },
        taxNo: { required: true },
        mobile: { required: true, tel: true },
        certOss: { required: true },
        longitude: { required: true },
        districts: { required: true },
        detailAddress: { required: true },
        logisticsAddress: { required: true },
        logisticsContact: { required: true, tel: true }
    }
    const messages = {
        name: { required: '请输入商户名称' },
        alias: { required: '请输入商户简称' },
        taxNo: { required: '请输入商户税号' },
        mobile: { required: '请输入收件人手机号', tel: '手机号格式不正确' },
        certOss: { required: '请上传营业执照' },
        longitude: { required: '请选择营业执照所在地' },
        districts: { required: '请选择省市区' },
        detailAddress: { required: '请输入详细地址' },
        logisticsAddress: { required: '请输入物流收货地址' },
        logisticsContact: { required: '请输入物流收货电话', tel: '手机号格式不正确' }
    }
    const wxv = new WxValidate(rules, messages)
    if (!wxv.checkForm(params.value)) {
        const error = wxv.errorList[0]
        showToast(error.msg)
        return false
    }
    
    loading.value = true
    merchantRegister(params.value).then(res => {
        loading.value = false
        showToast('商户注册成功', () => {
            uni.reLaunch({
                url: '/pages/init/start'
            })
        })
    }).catch(e => {
        loading.value = false
    })
}
</script>

<style lang="scss">
.address {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    &-form {
        margin-top: 20rpx;
        background-color: #fff;
        padding: 0 $zzk-margin 120rpx;
    }
    &-line {
        padding: 20rpx 0;
        border-bottom: #f5f5f5 1rpx solid;
        .label {
            width: 160rpx;
            line-height: 80rpx;
            font-size: 28rpx;
            &.long {
                width: 240rpx;
            }
        }
        .value {
            align-items: center;
            flex: 1;
            &.f {
                justify-content: center;
                align-items: flex-start;
            }
        }
        .txt {
            font-size: 28rpx;
            color: #333;
            line-height: 80rpx;
            flex: 1;
            &.gray {
                color: #c0c4cc;
            }
        }
        .codebtn {
            width: 200rpx;
        }
        .input {
            flex: 1;
        }
        .img {
            width: 160rpx;
            height: 160rpx;
            display: block;
            border-radius: 8rpx;
        }
    }
    &-bottom {
        flex: 1;
        padding: 0 $zzk-margin;
        align-items: center;
    }
    &-upload {
        border: #ccc 1rpx dashed;
        border-radius: 8rpx;
        height: 160rpx;
        width: 160rpx;
        justify-content: center;
        align-items: center;
        .tip {
            font-size: 24rpx;
            line-height: 40rpx;
            color: #999;
        }
    }
}
</style>